<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">报警信息</text>
			</view>
		</uni-nav-bar>
		<view class="content padding">
			<form class="user-form" :disabled="true">
				<view class="card">
					<view class="user-form-item">
						<view class="form-label">报警信息</view>
						<view class="form-input desc" style="height: auto;">
							{{formObj.alarm.alarmInformation}}
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">开始时间</view>
						<view class="form-input desc">
							{{formObj.alarm.alarmStartTime || '- -'}}
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">结束时间</view>
						<view class="form-input desc">
							{{formObj.alarm.alarmEndTime || '- -'}}
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">持续时长</view>
						<!-- <input class="form-input" v-model="formObj.alarm.duration" name="duration" placeholder="请输入持续时长" /> -->
						<view class="form-input desc">
							{{formObj.alarm.durationStr || '- -'}}=>{{formObj.alarm.duration || '- -'}}小时
						</view>
					</view>
					<view v-if="formObj.alarm.processingStatus !== 'e003_02'" class="user-form-item">
						<view class="form-label">处理结果</view>
						<view class="form-input desc" style="height: auto;">
							{{formObj.alarm.processingResults || '- -'}}
						</view>
					</view>
					<view  v-if="formObj.alarm.processingImagePath" class="user-form-item">
						<image :src="'https://www.cdlepan.com:7443'+formObj.alarm.processingImagePath"></image>
					</view>
					
				</view>
				<!-- 处理  -->
				<view v-if="type == 'handle' && formObj.alarm.processingStatus == 'e003_02'"  style="margin-bottom: 20upx;">
					<view class="card">
						<view style="margin-bottom: 20upx;">
							<uni-easyinput type="textarea" v-model="formObj.alarm.processingResults" placeholder="请输入处理结果"></uni-easyinput>
						</view>
						<view style="margin-bottom: 20upx;">
							<TmUpload ref="imgUpload" :list="imgList" :disabled="false" :maxLength="1"/>
						</view>
						<view style="display: flex;flex-direction: row;justify-content: space-between;">
							<text>处理结果：</text>
							<view @click="handleResult('e003_04')" style="background-color: #156dac;color: #fff;text-align: center;border-radius: 10upx;padding: 5upx;flex: 0 0 30%;">
								<text>已处理</text>
							</view>
							<view @click="handleResult('e003_03')" style="background-color: #156dac;color: #fff;text-align: center;border-radius: 10upx;padding: 5upx;flex: 0 0 30%;">
								<text>退回</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 步骤条 -->
				<view class="card">
					<view class="card-title">操作流程</view>
					<uni-steps 
						:options="steps" direction="column" :active="steps.length"
					>
					</uni-steps>
				</view>
				<!-- 评价 apply -->
				<view v-if="type == 'apply' || type =='detail'" class="card">
					<view class="user-form-item">
						<text class="form-label ">运维结果评价</text>
						<uni-rate class="form-input no-border flex-start-center" :disabled="isDetail"  :size="18" :value="formObj.alarm.overallEvaluation || 0" @change="(e)=>rateChange('overallEvaluation',e)"/>
					</view>
					<view class="user-form-item">
						<text class="form-label ">处置人员评价</text>
						<uni-rate class="form-input no-border flex-start-center"  :disabled="isDetail" :size="18" :value="formObj.alarm.disposalPersonnelEvaluation || 0"  @change="(e)=>rateChange('disposalPersonnelEvaluation',e)"/>
					</view>
					<view class="user-form-item">
						<text class="form-label ">内容说明</text>
						<input v-if="!isDetail" class="form-input" v-model="formObj.alarm.contentDescription" name="contentDescription" placeholder="" />
						<text v-else class="form-input no-border">{{formObj.alarm.contentDescription||'--'}}</text>
					</view>
					<view v-if="type == 'apply'" style="display: flex;flex-direction: row;justify-content: center;">
						<view @click="handleEvaluation" style="background-color: #156dac;color: #fff;text-align: center;border-radius: 10upx;padding: 5upx;flex: 0 0 50%;">
							<text>评价</text>
						</view>
					</view>
				</view>
			</form>
			
		</view>
		<ourLoading isFullScreen color="#156dac" :active="businessLoading" />
	</view>
</template>
<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import ourLoading from '@/components/our-loading/our-loading.vue'
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import TmUpload from '@/components/tm-upload/tm-upload.vue'
	
	const getBussinessDetailUrl = '/business/alarm'
	const updateById = '/business/alarm/updateById'
	
	export default {
		components: {
			uniIcons,uniPopup,ourLoading,uniSteps,TmUpload
		},
		data() {
			return {
				isDetail: false,
				type: '',
				businessLoading: false,
				formObj: {
					alarm: {
					  alarmInformation: null,
					  alarmStartTime: null,
					  alarmEndTime: null,
					  duration: null,
					  processingResults: null,
					  contentDescription: '',
					  disposalPersonnelEvaluation: 5,
					  overallEvaluation: 5
					},
					alarmProcesses: null
				},
				tableValue: [],
				resultList:[
					{id:1,label:'优'},
					{id:2,label:'良'},
				],
				steps: [{title:'买家下单',desc:'2018-11-11'},],
				unitList:[
					{id: 1,name: '单位一'},{id: 1,name: '单位二'},
				],
				form:{
					name: '',date: '',unit: '',
				},
				imgList: []
			}
		},
		onLoad(option) {
			console.log(option)
			this.isDetail = option.type === 'detail'
			this.type = option.type
			const id = option.id
			if(id){
				this.businessLoading = true
				this.$api.request(`${getBussinessDetailUrl}/${id}`,{
					method: 'get',
				}).then(res=>{
					this.businessLoading = false
					console.log(res)
					if(res.success){
						this.formObj = res.data
						if(this.type == 'apply'){
							let val1 = res.data.alarm.overallEvaluation
							let val2 = res.data.alarm.disposalPersonnelEvaluation
							if(!val1){
								val1 = 0
							}
							if(!val2){
								val2 = 0
							}
							this.formObj.alarm.overallEvaluation = parseInt(val1)
							this.formObj.alarm.disposalPersonnelEvaluation = parseInt(val2)
						}
						this.steps = res.data.alarmProcesses.map(item=>{
							return {
								title: item.operationContent,
								desc: item.operationTime
							}
						})
						console.log(this.formObj)
						//如果还未确认自动确认
						// if (this.formObj.alarm.processingStatus === 'e003_01') {
						//     this.$api.request('/business/alarm/updateById',{
						//     	method: 'post',
						// 		data: { 'processingStatus': 'e003_02', 'id': this.formObj.alarm.id }
						//     }).then(res=>{
						//     	this.formObj.alarm.processingStatus = 'e003_02'
						//     }).catch(()=>{
						//     })
						// } 
					}
				}).catch(()=>{
					this.businessLoading = false
				})
			}
			
		},
		methods: {
			toggle(){
				this.$refs.popup.open()
			},
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			tableChange(e){
				console.log(e.detail)
			},
			setTableData(e,index){
				console.log(e.detail.value,index)
				this.$set(this.tableValue,index,e.detail.value)
			},
			rateChange(key,e){
				this.formObj.alarm[key] = e.value
			},
			handleEvaluation() {
				if(this.formObj.alarm.overallEvaluation===0){
					this.$api.toastMsg('请对运维结果评价')
					return
				}
				if(this.formObj.alarm.disposalPersonnelEvaluation===0){
					this.$api.toastMsg('请对处置人员评价')
					return 
				}
				this.formObj.alarm.processingStatus = 'e003_05'
				uni.showLoading({
					title:'提交中',mask: true
				})
				this.$api.request(updateById,{
					method: 'post',
					data: this.formObj.alarm
				}).then(res=>{
					console.log(res)
					uni.hideLoading()
					if(res.success){
						this.$api.toastMsg('评价成功','success')
						setTimeout(()=> {
							this.pageback()
						}, 1000);
					}else{
						this.$api.toastMsg(res.message)
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			handleResult(status){
				const list = this.$refs.imgUpload ? this.$refs.imgUpload.getPaths(): []
				this.formObj.alarm.processingStatus = status
				debugger
				if(list[0]){
					this.formObj.alarm.processingImagePath = list[0].url
				}
				let flag = '已处理';
				if(status==='e003_03'){
					flag = '退回';
				}
				uni.showModal({
					title: '提示',
					content: '是否标记'+flag+'？',
					success: (e)=>{
						if(e.confirm){
							uni.showLoading({
								title:'提交中',mask: true
							})
							this.$api.request(updateById,{
								method: 'post',
								data: JSON.parse(JSON.stringify({
									...this.formObj.alarm,
									alarmInformation: undefined
								}))
							}).then(res=>{
								uni.hideLoading()
								if(res.success){
									this.$api.toastMsg(flag,'success')
									setTimeout(()=> {
										this.pageback()
									}, 1000);
								}else{
									this.$api.toastMsg(res.message)
								}
							}).catch(()=>{
								uni.hideLoading()
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}

</style>
